<template>
  <div class="pending-review-page">
    <a-card title="我的待审核图片">
      <div v-if="imageList.length === 0" class="empty-state">
        <a-empty description="暂无待审核的图片" />
      </div>
      <div v-else>
        <a-list
          :grid="{ gutter: 16, column: 4 }"
          :data-source="imageList"
          class="image-list"
        >
          <template #renderItem="{ item }">
            <a-list-item>
              <a-card hoverable class="image-card">
                <a-image
                  :src="item.url"
                  :alt="item.name"
                  class="image-preview"
                  :preview="false"
                />
                <div class="image-info">
                  <h3 class="image-title">{{ item.name }}</h3>
                  <p class="image-description">{{ item.introduction }}</p>
                  <div class="image-meta">
                    <span class="meta-item">{{ item.category }}</span>
                    <span class="meta-item">{{ formatDate(item.createTime) }}</span>
                  </div>
                  <div class="image-status">
                    <a-tag :color="getReviewStatusColor(item.reviewStatus)">
                      {{ getReviewStatusText(item.reviewStatus) }}
                    </a-tag>
                  </div>
                </div>
              </a-card>
            </a-list-item>
          </template>
        </a-list>
        <div class="pagination-container">
          <a-pagination
            v-model:current="currentPage"
            v-model:page-size="pageSize"
            :total="total"
            show-size-changer
            @change="handlePageChange"
          />
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { useLoginUserStore } from '@/stores/useLoginUserStore'
import { listPendingPictureVoByPageUsingPost, listPictureVoByPageUsingPost } from '@/api/pictureController'

// 分页相关状态
const currentPage = ref(1)
const pageSize = ref(8)
const total = ref(0)

// 图片列表
const imageList = ref<any[]>([])

// 获取审核状态文本
const getReviewStatusText = (status: number) => {
  const textMap: Record<number, string> = {
    0: '待审核',
    1: '已通过',
    2: '已拒绝',
  }
  return textMap[status] || '未知'
}

// 获取状态颜色
const getReviewStatusColor = (status: number) => {
  const colorMap: Record<number, string> = {
    0: 'orange',
    1: 'green',
    2: 'red',
  }
  return colorMap[status] || 'default'
}

// 格式化时间
const formatDate = (dateString: string) => {
  if (!dateString) return '-'
  return new Date(dateString).toLocaleString()
}

// 获取用户待审核图片列表
const fetchUserPendingImages = async () => {
  try {
    const loginUserStore = useLoginUserStore()
    const userId = loginUserStore.loginUser.id

    if (!userId) {
      message.error('获取用户信息失败')
      return
    }

    const params = {
      userId: userId,
      reviewStatus: 0, // 待审核状态
      current: currentPage.value,
      pageSize: pageSize.value,
    }

    const res = await listPendingPictureVoByPageUsingPost(params)

    if (res.data.code === 0) {
      imageList.value = res.data.data?.records || []
      total.value = res.data.data?.total || 0
    } else {
      message.error(res.data.message || '获取待审核图片失败')
    }
  } catch (error) {
    console.error('获取待审核图片失败:', error)
    message.error('获取待审核图片失败')
  }
}

// 处理分页变化
const handlePageChange = (page: number, pageSizeVal: number) => {
  currentPage.value = page
  pageSize.value = pageSizeVal
  fetchUserPendingImages()
}

// 组件挂载时获取数据
onMounted(() => {
  fetchUserPendingImages()
})
</script>

<style scoped>
.pending-review-page {
  padding: 24px;
}

.image-list {
  margin-top: 24px;
}

.image-card {
  border-radius: 8px;
  overflow: hidden;
}

.image-preview {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.image-info {
  padding: 12px;
}

.image-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.image-description {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.image-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}

.meta-item {
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 4px;
}

.image-status {
  text-align: right;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.empty-state {
  text-align: center;
  padding: 48px 0;
}
</style>
